<template>
    <div class="maindiv">
        <goback :getName='goName'></goback>
        <div class="personal-information">
            <router-link :to="'/deliveryAddress/1'">
                <div class="personal-info">
                    <div class="blank-info" v-if="isBlank">请填写收货信息</div>
                    <div class="personal-name">
                        <span>{{userInfomation.name}}</span>
                    </div>
                    <div class="personal-tel">{{telEncrypt}}</div>
                    <div class="personal-address">
                        <span>{{userInfomation.address}}</span>
                    </div>
                    <span class="revise">
                        <img src="../../assets/other/goback.png" alt="">
                    </span>
                </div>
            </router-link>
            <div class="border">
            </div>
            <div class="pay">
                <div class="bean">
                    <span>支付方式 ：</span>
                    <div>
                        <span class="pay-name">乐豆</span>
                        <span class="minusOrPlus" @click="minus('beanCount')">-</span>
                        <input type="number" class="pay-count" name="beanCount" v-model="beanCount">
                        <span class="minusOrPlus" @click="plus('beanCount')">+</span>
                    </div>
                </div>
                <div class="wx">
                    <span>剩余乐豆：{{allBeanCount}}</span>
                    <div>
                        <span class="pay-name">现金</span>
                        <span class="minusOrPlus" @click="minus('wxCount')">-</span>
                        <input type="number" class="pay-count" name="wxCount" v-model="wxCount">
                        <span class="minusOrPlus" @click="plus('wxCount')">+</span>
                    </div>
                </div>
                <div class="points">
                    <div>
                        <span class="pay-name">积分</span>
                        <span class="minusOrPlus fundHidden">-</span>
                        <input type="number" class="pay-count" name="points" v-model="points">
                        <span class="minusOrPlus fundHidden">+</span>
                    </div>
                </div>
            </div>
        </div>
        <dl class="goods-list">
            <dd v-for="(goods,index) of goodses" :key="index">
                <div class="goods-img">
                    <img :src="goods.thumbnail" alt="">
                </div>
                <div class="goods-info">
                    <span class="goods-name">{{goods.productName}}</span>
                    <span class="goods-price">￥{{goods.price}}</span>
                    <span class="goods-count">x{{goods.num}}</span>
                </div>
            </dd>
        </dl>
        <dl class="order">
            <dd class="order-price">
                <span class="symbol">￥</span>
                <span>{{totalPrice}}</span>
            </dd>
            <dd class="submit-order" @click="submitOrder">提交订单</dd>
        </dl>
    </div>
</template>

<script>
    import goback from '../../components/goback'
    import pingpp from 'pingpp-js'
    import { userInfoGet, payview } from '../../libs/publicMethod' // 获取用户信息
    import { getAddressList, getGoodsInfoByCode, clearCart, getAccountAmount } from '../../libs/interface' // 获取接口
    import { Indicator } from 'mint-ui'
    export default {
        components:{ goback, getAddressList, getGoodsInfoByCode, clearCart, getAccountAmount, payview, Indicator, pingpp },
        data () {
            return {
                userInfo: userInfoGet(), // 用户信息
                goName: '确认订单',
                allBeanCount: 0,
                beanCount: 0, //乐豆
                wxCount: 0, //微信
                points: 0, //积分
                usePoints: 0, //可用积分
                isBlank: true, //默认地址是否为空
                channel: 'wx_pub', // 充值方式 ：微信———>wx_pub
                //用户信息
                userInfomation: {
                    tel: '',
                    name: '',
                    address: '',
                },
                //商品数据
                goodses: [],
                totalPrice: 0,
                tPrice: 0,
            }
        },
        methods: {
            minus (count) {
                if (count === 'beanCount') {
                    this.beanCount--
                }
                if (count === 'wxCount') {
                    this.wxCount--
                }
            },
            plus (count) {
                if (count === 'beanCount') {
                    this.beanCount++
                }
                if (count === 'wxCount') {
                    this.wxCount++
                }
            },
            submitOrder () {
                let vm = this
                if (vm.isBlank) {
                    vm.$toast('请填写收货信息')
                    return
                } 
                let params = {
                    orderCode: vm.goodses[0].orderCode,
                    memberId: vm.userInfo.id,
                    info: JSON.stringify(vm.userInfomation).replace('tel', '联系电话').replace('name', '姓名').replace('address', '收货地址'),
                    inviterid: sessionStorage.getItem('inviterID')? sessionStorage.getItem('inviterID'):-1,
                }
                Indicator.open({
                    text: '支付中...',
                    spinnerType: 'fading-circle'
                })
                if (vm.wxCount > 0) { 
                    payview(vm.wxCount, vm.channel, (data) => {
                        Indicator.close()
                        // vm.wxCount = 0
                        try {                               
                            pingpp.createPayment(data, function (result, err) {
                                if (result == "success") {
                                    Indicator.open({
                                        text: '支付中...',
                                        spinnerType: 'fading-circle'
                                    })
                                    var closeT = setTimeout(() => {
                                        vm.wxCount = 0
                                        clearCart(params, (buyData) => {
                                            Indicator.close()
                                            if (buyData.code === 1) {
                                                sessionStorage.removeItem('addressinfoSet');
                                                vm.$toast('购买成功！')
                                                vm.$router.replace('/my');
                                            } else {
                                                vm.$toast(buyData.msg)
                                                location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2Forder%2F' + vm.goodses[0].orderCode + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect')
                                            }
                                        })
                                    }, 2500);
                                    // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的 wap 支付结果都是在 extra 中对应的 URL 跳转。
                                } else if (result == "fail") {
                                    alert("错误信息：charge 不正确或者微信公众账号支付失败时")
                                    // charge 不正确或者微信公众账号支付失败时会在此处返回
                                } else if (result == "cancel") {
                                    // 微信公众账号支付取消支付
                                }
                            });
                        } catch (error) {
                            location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2Forder%2F' + vm.goodses[0].orderCode + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect')
                        }
                    })
                } else {
                    clearCart(params, (data) => {
                        Indicator.close()
                        if (data.code === 1) {
                            vm.$toast('购买成功')
                            this.$router.replace('/my')
                        } else {
                            vm.$toast(data.msg)
                        }
                    })
                }
            }
        },
        mounted () {
            let vm = this
            let params = {
                memberid: vm.userInfo.id,
            }
            if (!sessionStorage.getItem('addressinfoSet')) {
                getAddressList(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload < 1) {
                            this.isBlank = true
                        } else {
                            this.isBlank = false
                            data.payload.forEach(elem => {
                                if (elem.isdefault === 1) {
                                    vm.userInfomation.name = elem.name
                                    vm.userInfomation.tel = elem.phone
                                    vm.userInfomation.address = elem.address
                                }
                            })
                        }
                    } else {
                        vm.$toast('获取地址失败')
                    }
                })
            } else {
                vm.isBlank = false
                let addressInfo = JSON.parse(sessionStorage.getItem('addressinfoSet'))
                vm.userInfomation.name = addressInfo.name
                vm.userInfomation.tel = addressInfo.phone
                vm.userInfomation.address = addressInfo.address
            }
            let param = {
                orderCode: vm.$route.params.id,
            }
            getGoodsInfoByCode(param, (data) => {
                if (data.code === 1) {
                    vm.goodses = data.payload
                    vm.tPrice = 0
                    vm.goodses.forEach((elem)=>{
                        elem.price = (elem.price/100).toFixed(2)
                        vm.tPrice += elem.num * elem.price
                        vm.usePoints += (elem.price - (elem.clearPrice / 100)) * elem.num /2
                    })
                    vm.totalPrice = vm.tPrice.toFixed(2)
                    let paramss = {
                        memberid: vm.userInfo.id,
                    }
                    getAccountAmount(paramss, (data) => {
                        if (data.code === 1) {
                            vm.allBeanCount = data.payload.lb
                            vm.points = data.payload.zcjf
                            if (vm.points - vm.usePoints > 0) {
                                vm.points = vm.usePoints
                            }
                            // vm.wxCount = Math.ceil(vm.tPrice - vm.points)
                            vm.wxCount = 0
                            vm.beanCount = vm.tPrice
                        } else {
                            vm.$toast(data.msg)
                        }
                    })
                } else {
                    vm.$toast('系统异常')
                }
            })
        },
        computed: {
            //手机号中间4位隐藏
            telEncrypt () {
                return this.userInfomation.tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
            },
        },
        watch: {
            beanCount: function () {
                let vm = this
                if (vm.beanCount - 0 < 0) {
                    vm.beanCount = 0
                }
                if (vm.beanCount - vm.tPrice > 0) {
                    vm.beanCount = vm.tPrice
                }
                if (vm.beanCount - vm.allBeanCount > 0) {
                    vm.beanCount = vm.allBeanCount
                }
                vm.wxCount = Math.ceil(vm.tPrice - vm.beanCount - vm.points)
                vm.beanCount = (vm.beanCount - 0).toFixed(2)
            },
            wxCount: function () {
                let vm = this
                if (vm.wxCount - 0 < 0) {
                    vm.wxCount = 0
                }
                if (vm.wxCount - Math.ceil(vm.tPrice) > 0) {
                    vm.wxCount = Math.ceil(vm.tPrice)
                }
                vm.beanCount = (vm.totalPrice - Math.ceil(vm.wxCount) - vm.points).toFixed(2)
                vm.wxCount = Math.ceil(vm.wxCount)
            },
        }
    }
</script>

<style scoped>
a{
    color: #333;
}
.maindiv{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}
.head-title{
    position: absolute;
    top: 0;
    left: 2.5rem;
    font-size: .8rem;
}
.personal-information{
    background-color: #fff;
    height: 12rem;
    width: 94%;
    border-radius: .6rem;
    margin: .4rem auto;
    overflow: hidden;
}
.personal-info{
    height: 50%;
    position: relative;
    text-align: left;
}
.blank-info{
    position: absolute;
    width: 100%;
    font-size: 1.6rem;
    height: 2.1rem;
    color: #F23030;
    top: 0;
    bottom: 0;
    margin: auto 1rem;
}
.personal-name{
    display: inline-flex;
    align-items: flex-end;
    height: 50%;
    width: 28%;
    margin-left: 1rem;
    font-size: 1.2rem;
}
.personal-name span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.personal-tel{
    display: inline-flex;
    align-items: flex-end;
    height: 50%;
    font-size: 1.2rem;
}
.personal-address{
    width: 82%;
    height: 50%;
    font-size: .7rem;
    margin-left: 1rem;
    position: relative;
}
.personal-address span{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.revise{
    display: inline-block;
    transform: rotateY(180deg);
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    margin: auto;
    right: 1rem;
    top: 0;
    bottom: 0;
}
.revise img{
    width: 100%;
    height: 100%;
}
.border{
    width: 96%;
    height: .22rem;
    margin: 0 auto;
    background-image: url('../../assets/other/red.png');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
}
.pay{
    height: 37%;
}
.fundHidden{
    color: rgba(0,0,0,0);
}
.points{
    display: flex;
    justify-content: flex-end;
    font-size: .95rem;
    margin: 0 2.3rem 0 1.5rem;
    color: #333;
}
.bean{
    height: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: .95rem;
    margin: -.2rem 2.3rem .3rem 1.5rem;
    color: #333;
}
.bean span, .wx span, .points span{
    display: inline-block;
}
.bean>span, .wx>span, .points>span{
    text-align: left;
    width: 40%;
    white-space: nowrap;
    font-size: .9rem;
}
.bean>div, .wx>div, .points>div{
    margin-right: -7%;
}
.bean>div span, .wx>div span, .points>div span{
    margin-left: .7rem;
}
.pay-name{
    font-size: .9rem;
}
.pay .pay-count {
    width: 3rem;
    height: 1.5rem;
    background-color: #F6F6F6;
    outline: none;
    border: none;
    text-align: center;
    margin-left: .7rem;
    font-size: .95rem;
}
.wx{
    height: 33%;
    margin: 0 2.3rem 0 1.5rem;
    font-size: .95rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.minusOrPlus{
    font-size: 1.45rem;
}
.goods-list{
    background-color: #fff;
    width: 94%;
    height: 40%;
    margin: .4rem auto;
    overflow: auto;
    border-radius: .6rem;
    padding-bottom: 11rem;
}
.goods-list>dd{
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
}
.goods-list .goods-img{
    width: 8rem;
    height: 6rem;
} 
.goods-list .goods-img img{
    display: block;
    width: 100%;
    height: 100%;
}
.goods-info{
    width: 45%;
    font-size: .7rem;
    position: relative;
}
.goods-info span{
    display: block;
    text-align: left;
    transform: scale(.9);
}
.goods-name{
    color: #333;
    margin: 8% 0 8% 0;
}
.goods-price{
    font-size: 1rem;
    font-weight: bold;
    color: #F23030;
}
.goods-count{
    position: absolute;
    bottom: .8rem;
    right: 0;
    font-size: 1rem;
}
.order{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
.order-price{
    width: 65%;
    height: 3.3rem;
    line-height: 3.3rem;
    background: linear-gradient(0deg,#F5F5F5,#FFFFFF);
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #F23030;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
    padding: 0 1rem;
}
.symbol{
    font-size: .9rem;
}
.submit-order{
    width: 35%;
    height: 3.3rem;
    line-height: 3.3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    font-size: 1.1rem;
    color: #fff;
}
</style>